<template>
  <div class="recommended-container w">
    <!-- 今日推荐 -->
    <div class="today">
      <img src="../../assets/images/home/clock.png" />
      <h3>今日推荐</h3>
    </div>
    <!-- 推荐商品 -->
    <ul class="rcmd-shop-list">
      <li>
        <router-link to=""
          ><img src="../../assets/images/home/today01.png" alt=""
        /></router-link>
      </li>
      <li>
        <router-link to=""
          ><img src="../../assets/images/home/today02.png" alt=""
        /></router-link>
      </li>
      <li>
        <router-link to=""
          ><img src="../../assets/images/home/today03.png" alt=""
        /></router-link>
      </li>
      <li>
        <router-link to=""
          ><img src="../../assets/images/home/today04.png" alt=""
        /></router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Recommended'
}
</script>

<style lang="less" scoped>
.recommended-container {
  display: flex;
  .today {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 220px;
    height: 163px;
    text-align: center;
    background-color: #5c5351;
    img {
      width: 57px;
      height: 57px;
      margin-bottom: 15px;
    }
    h3 {
      color: #fff;
    }
  }
  .rcmd-shop-list {
    display: flex;
    li {
      width: 248px;
      height: 163px;
      a {
        width: 100%;
        height: 100%;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
